<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
		<link href="../css/zcss/switchery.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/custombox.min.css" rel="stylesheet">
		<link href="../css/zcss/animate.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">

		<script src="../../code/highcharts.js"></script>
		<script src="../../code/modules/exporting.js"></script>
		<style>
			.el-select .el-input {
				width: 110px;
			}
			
			.el-table .info-row {
				background: #c9e5f5;
			}
			
			text.highcharts-credits {
				display: none;
			}
			
			.sss {
				width: 150px;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
				white-space: nowrap;
			}
		</style>
	</head>

	<body class="fixed-center" style="height: 1000px;">
		<!-- ============================================================== -->
		<!-- 右侧主体内容开始-->
		<!-- ============================================================== -->
		<div class="content-page crm" style="margin: 0;">
			<div class="content" style="margin: 0;">
				<div class="container-fluid" style="min-height: 900px;">
					<div class="row">
						<div id="idid" class="col-sm-12">
							<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">

								<!----------------筛选、查询input代码开始-------------------->
								<div id="search">

									<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">

										<el-input placeholder="输入主题" v-model="ruleForm.input" class="input-with-select">
											<el-select v-model="ruleForm.selects" slot="prepend" clearable placeholder="全部数据">
												<!--投诉类型 -->
												<el-option label="保修" value="401"></el-option>
												<el-option label="出报" value="402"></el-option>
												<!-- 服务方式 -->
												<el-option label="保养" :value="451"></el-option>
												<el-option label="安装" :value="452"></el-option>
												<el-option label="升级" :value="453"></el-option>
												<el-option label="其他" :value="454"></el-option>
												<!-- 投诉状态 -->
												<el-option label="执行中" value="461"></el-option>
												<el-option label="结束" value="462"></el-option>
												<el-option label="结束" value="462"></el-option>
												<el-option label="待客户确定" value="463"></el-option>
											</el-select>
											<el-button slot="append" icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>
										</el-input>
									</div>
								</div>
								<!----------------列表-------------------->
								<div id="qlist" style="z-index: 0">
									<div id="editqlist" style="position: absolute; display: none; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; center: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; top: 0; width: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; height: 0; z-index: 100; background-color: #D4D0C8;">

									</div>
									<div class="row m-t-15 f-s-12" style="height: 35px;">
										<div class="col-sm-6"></div>
										<div class="col-sm-6 text-right" id="boxcreate">
											<el-button class="btn btn-white waves-effect waves-light" type="text" @click="centerDialogVisible = true"> <i class="fa fa-plus-circle m-

r-5">新建</i> </el-button>
											<el-dialog :visible.sync="centerDialogVisible" width="1024px" center> <iframe src="/weixiu2" width="100%" frameborder="0" onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth">
									</iframe> </el-dialog>
										</div>

									</div>
								</div>

								<div class="tab-content p-0">
									<div class="bootstrap-table m-t-10">
										<div class="fixed-table-container overflow-x-auto">

											<table class="table table-bordered table-hover table-z" id="qlist_table">
												<thead>
													<tr>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='subject'; qlist_argv_orderv=0;qlist_load();" set-lan="html:主题">编号</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='subject'; qlist_argv_orderv=0;qlist_load();" set-lan="html:主题">主题</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='subject'; qlist_argv_orderv=0;qlist_load();" set-lan="html:主题">商品</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='cu_id'; qlist_argv_orderv=0;qlist_load();" set-lan="html:对应客户">对应客户</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='type'; qlist_argv_orderv=0;qlist_load();" set-lan="html:接单日期">接单日期</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='mode'; qlist_argv_orderv=0;qlist_load();" set-lan="html:费用">费用</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='mode'; qlist_argv_orderv=0;qlist_load();" set-lan="html:状态">状态</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="JavaScript:qlist_argv_orderf='mode'; qlist_argv_orderv=0;qlist_load();" set-lan="html:执行人">执行人</a>
															</p>
														</th>
														<th class="th-inner">操作</th>
													</tr>
												</thead>
												<tbody class="bg-white">

													<tr v-for="(weixiu,i) in tableData">
														<td><p align="center">{{ruleForm.totalCount-i-((ruleForm.currentPage-1)*6)}}</p></td>

														<td>
																<p align="center">
																<a   id="qlist_F3" onclick=" reportMove(this) ;" href='JavaScript:qlist_click_todetail("3","8c1aec");'> <i class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{weixiu.rep_name}}
																</a>
																</p>
															
														</td>
														<td width="15%">
															<p align="center" class="sss">
																<a :title="weixiu.goo_name" href="">{{weixiu.goo_name}}</a>
															</p>
														</td>

														<td>
															<p align="center"><span style="font-weight:normal;color:#9e9e9e">〖</span>{{weixiu.cus_name}}
																<a :href="'/cusview?id=' + weixiu.cus_id "><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e">〗</span></p>
														</td>

														<td>
															<p align="center">{{dateFormate(weixiu.rep_date,1)}}</p>
														</td>
														<td>
															<p align="center">{{weixiu.rep_sumcost}}</p>
														</td>
														<td>
															<p align="center">
																<i v-show="weixiu.state ==='意外终止'" data-toggle="tooltip" data-placement="bottom" data-title="未处理" class="f-s-16 fa fa-exclamation text-warning" :title="weixiu.state"></i>

																<i v-show="weixiu.state ==='执行中'" :title="weixiu.state" class="f-s-16 fa fa-arrow-right text-primary" data-toggle="tooltip" data-title="处理中" data-placement="bottom"></i>

																<i v-show="weixiu.state ==='结束'" :title="weixiu.state" data-toggle="tooltip" data-placement="bottom" data-title="处理完成" class="f-s-16 fa fa-check text-custom"></i>
																<i v-show="weixiu.state ==='待客户确认'" :title="weixiu.state" data-toggle="tooltip" data-placement="bottom" data-title="待客户确认" class="f-s-16 fa fa-arrow-right text-primary"></i>

															</p>
														</td>
														<td>
															<p align="center">{{weixiu.use_name}}</p>
														</td>

														<td width="3%" align="center">
															<a :href="'/weixiuEditor?id=' + weixiu.rep_id " data-toggle="tooltip" data-placement="bottom" data-original-title="处理"><i class="el-icon-document"></i></a>

														</td>
												</tbody>
											</table>

										</div>
									</div>

									<div class="row m-t-10">
										<div class="col-sm-3">

											&nbsp;

										</div>

										<div class="col-sm-7">
											&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
											<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ruleForm.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize" layout="prev, pager, next, jumper" :total="ruleForm.totalCount"> </el-pagination>
										</div>

										<div class="col-sm-2 text-right" style="text-align: center !important; margin-top: 10px; font-size: 15px; font-weight: bold;">
											<span>售后投诉</span> <small class="text-muted font-13">{{ruleForm.totalCount}}条</small>
										</div>
									</div>

								</div>
							</el-form>

							<el-dialog :visible.sync="centerDialogVisible4" width="900px" center> <iframe :src="FrameSrc" width="100%" onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth" frameborder="0" scrolling="no"></iframe> </el-dialog>

						</div>
						<script>
							var vm = new Vue({
								el: "#idid",
								data() {
									return {
										texts: "",
										centerDialogVisible: false,
										centerDialogVisible1: false,
										centerDialogVisible2: false,
										centerDialogVisible3: false,
										centerDialogVisible4: false,
										//表格当前页数据
										tableData: [],
										FrameSrc: "",
										ruleForm: {
											//搜索框
											input: '',
											//下拉条件按钮
											selects: '',
											//默认每页数据量
											pagesize: 6,

											//当前页码
											currentPage: 1,
											//默认数据总数
											totalCount: 0,
										}
									}
								},
								methods: {
									//从服务器读取数据
									loadData: function() {
										var iosnn = this;
										//post提交数据
										axios.post("/afterSale/kehuweixiu",
											//参数转换
											Qs.stringify(this.ruleForm, {
												arrayFormat: 'brackets'
											})
										).then(function(v) {
											iosnn.tableData = v.data.list;
											iosnn.ruleForm.totalCount = v.data.total;
											console.info(v.data);
										}).catch(function(e) {
											alert("出错了" + e);
										});
									},
									handleSizeChange(val) {
										this.ruleForm.pagesize = val;
										console.log(this.ruleForm.pagesize + '条');
										this.ruleFormloadData();
									},
									handleCurrentChange(val) {
										this.ruleForm.currentPage = val;
										console.log(this.ruleForm.currentPage + '当前');
										this.loadData();

									},
									submitForm(formName) {
										//验证方法
										this.$refs[formName].validate((valid) => {
											if(valid) {
												this.loadData();
											} else {
												console.log('error submit!!');
												return false;
											}
										});
									},
									resetForm(formName) {
										this.$refs[formName].resetFields();
									},
									//   时间格式化
									dateFormate: function(time, i) {
										var date = new Date(time);
										var year = date.getFullYear();
										/* 在日期格式中，月份是从0开始的，因此要加0
										 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
										 * */
										var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
										var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
										var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
										var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
										var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
										// 拼接
										//  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;

										if(i == 1) {
											return year + "-" + month + "-" + day;
										} else {
											return hours + ":" + minutes + ":" + seconds;
										}

									},

									delgood: function(c_id) {
										var r = confirm("您是否确认删除");
										if(r == true) {
											axios.post("/delWeixiu",
												//参数转换
												Qs.stringify({
													'id': id
												}, {
													arrayFormat: 'brackets'
												})
												//ajax请求成功的回调函数
											).then(function(v) {
												window.location.replace("/getWeixiuty");
											}).catch(function(e) {
												alert("出错了" + e);
											});
										}
									},
									editRow(id) {
										this.centerDialogVisible4 = true;
										this.FrameSrc = "/weixiuEditor?id=" + id;

									}
								},

								mounted() {
									var iosnn = this;
									//post提交数据
									axios.post("/weixiuty",
										//参数转换
										Qs.stringify(this.ruleForm, {
											arrayFormat: 'brackets'
										})
									).then(function(v) {
										iosnn.tableData = v.data.list;
										iosnn.ruleForm.totalCount = v.data.total;
									}).catch(function(e) {
										alert("出错了" + e);
									});
								}

							});
						</script>

						<!----------------统计-------------------->

						<div style="margin-top: 20px 0px 50px 50px;">
							<div id="container1" style="width: 50%; height: 400px; margin: 0 auto; float: right;"></div>
							<div id="container" style="width: 50%; height: 400px; margin-top：50px; float: right;"></div>
						</div>
						<script type="text/javascript">
							var weixiuresult = ${
								weixiuresult
							};

							var wei1 = [];
							for(var i = 0; i < weixiuresult.length; i++) {
								wei1.push({
									name: weixiuresult[i].result,
									y: weixiuresult[i].count
								});
							}

							// Make monochrome colors
							var pieColors = (function() {
								var colors = [],
									base = Highcharts.getOptions().colors[0],
									i;

								for(i = 0; i < 10; i += 1) {
									// Start out with a darkened base color (negative brighten), and end
									// up with a much brighter color
									colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
								}
								return colors;
							}());

							// Build the chart
							Highcharts.chart('container', {
								chart: {
									plotBackgroundColor: null,
									plotBorderWidth: null,
									plotShadow: false,
									type: 'pie'
								},
								title: {
									text: '维修工单完成状况分布'
								},
								tooltip: {
									pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
								},
								plotOptions: {
									pie: {
										allowPointSelect: true,
										cursor: 'pointer',
										colors: pieColors,
										dataLabels: {
											enabled: true,
											format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
											distance: -50,
											filter: {
												property: 'percentage',
												operator: '>',
												value: 4
											}
										}
									}
								},
								series: [{
									name: '占比',
									data: wei1
								}]
							});
							
							 
							var weixiuresult1 = ${
								weixiuresult1
							};
							var carrierName=[];//横坐标
							var series=[{
							        name: '保养',
							        id:451,
							        data: []

							    }, {
							        name: '安装',
							        id:452,
							        data: []

							    }, {
							        name: '升级',
							        id:453,
							        data: []

							    },{
							        name: '其他',
							        id:454,
							        data: []

							    }
							    ]
							//条形图
							$(function(){
								weixiuresult1.forEach(v=>{
									console.log(v);
									if(v != null){
									
											if(carrierName.indexOf(v.releaseYearMonth)==-1){
												carrierName.push(v.releaseYearMonth);
												series.forEach(a=>{
													a.data.push(0);
												})
											}
										
									}
								});
								
								weixiuresult1.forEach(v=>{
									if(v != null){
										
											var i=carrierName.indexOf(v.releaseYearMonth);
											series.forEach(a=>{
												if(a.id==v.type){
													a.data[i]=v.sum;
												}
											
										})
									}
								});
							
								
							Highcharts.chart('container1', {
								chart: {
									type: 'column'
								},
								title: {
									text: '月度收费状况'
								},
								xAxis: {
									categories: carrierName
								},
								yAxis: {
									min: 0,
									title: {
										text: '元'
									},
									stackLabels: {
										enabled: true,
										style: {
											fontWeight: 'bold',
											color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
										}
									}
								},
								legend: {
									align: 'right',
									x: -30,
									verticalAlign: 'top',
									y: 25,
									floating: true,
									backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
									borderColor: '#CCC',
									borderWidth: 1,
									shadow: false
								},
								tooltip: {
									headerFormat: '<b>{point.x}</b><br/>',
									pointFormat: '{series.name}: {point.y}元<br/>总和: {point.stackTotal}元',
									exporting: {
										enabled: false
									}, //隐藏导出图片
									credits: {
										enabled: false
									}
								},
								plotOptions: {
									column: {
										stacking: 'normal',
										dataLabels: {
											enabled: true,
											color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
										}
									}
								},
								series:series
							});
							
							})
						</script>
					</div>
				</div>
			</div>
	</body>
	<!--UTF8-->

</html>